<template>
    <div class="page-container">
        <ComTitle :list="['皮肤换装']" />
        <div class="skin-box">
            <div>请切换皮肤模式</div>
            <div class="btn-box">
                <SCButton type="info" @click="enableGrayscale()">启用灰色模式</SCButton>
                <SCButton type="primary" @click="disableGrayscale()">恢复正常模式</SCButton>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from "vue-router";
import ComTitle from "@/components/ComTitle.vue";

const route = useRoute();
// 启用灰度模式
const enableGrayscale = () => {
    document.documentElement.classList.add("grayscale-mode");
};

// 关闭灰度模式
const disableGrayscale = () => {
    document.documentElement.classList.remove("grayscale-mode");
};
</script>

<style lang="scss" scoped>
.skin-box,
.btn-box {
    margin-top: 20px;
}

.skin-box {
    font-size: 16px; 
}
</style>
